<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('myDailyManage.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDailyManage.name')}}</div>
              <el-input v-model="listQuery.name1" :placeholder="$t('myDailyManage.placeholder.pleaseImport')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDailyManage.timeCondition')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="timeCondition" type="daterange" range-separator="-" :start-placeholder="$t('myDailyManage.placeholder.startTime')" :end-placeholder="$t('myDailyManage.placeholder.endTime')"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDailyManage.description')}}</div>
              <el-input v-model="listQuery.description" :placeholder="$t('myDailyManage.placeholder.pleaseImport')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <yt-get-template-select v-model="listQuery.bu" :listData="'bu'" :placeholder="$t('myDailyManage.placeholder.pleaseImport')"></yt-get-template-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 33px">
            <div class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('myDailyManage.query')}}</div>
            <div class="yt-btn btn" @click="reset">{{$t('myDailyManage.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
       <!-- <span>{{$t('myDailyManage.DailyList')}}</span> -->

        <el-tabs v-model="tablePane">
          <el-tab-pane :label="$t('myDailyManage.report')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('myDailyManage.detail')" name="2"></el-tab-pane>
        </el-tabs>
      </div>


      <div v-if="tablePane === '1'" key="1">
        <el-table :data="countList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%;margin-top: 20px" max-height="600">
          <el-table-column type="index" align="center" :label="$t('myDailyManage.index')" width="60"/>
          <el-table-column align="center" :label="$t('myDailyManage.createName')" prop="userName"/>
          <el-table-column align="center" :label="$t('myDailyManage.stayDailyNum')">
            <template slot-scope="scope">
              <span style="color: #0000ff" @click="checkStayDailyNum(scope.row)">{{ scope.row.stayDailyNum }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('myDailyManage.dailyNum')">
            <template slot-scope="scope">
              <div @click="selectDailyByName(scope.row)" style="color: #6dcaa8;text-decoration:underline;">{{scope.row.dailyNum}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Total" prop="total"/>
        </el-table>

          <!--弹窗-->
          <el-dialog
            :title="$t('management.dailyReportManagement.dialogTitle')"
            :visible.sync="dialogVisible"
            class="yt-dialogForm-box"
          >
            <el-table :data="dialogList" :empty-text="$t('placeholder.emptyText')" label-width="100px" class="yt-table">
              <el-table-column type="index" align="center" :label="$t('management.dailyReportManagement.serialNumber')"/>
              <el-table-column :label="$t('management.dailyReportManagement.dailyDate')" prop="dailyDate" align="center"/>
              <el-table-column :label="$t('management.dailyReportManagement.remark')" prop="remark" align="center"/>
            </el-table>
            <div class="pagination-container">
              <el-pagination @size-change="dialoghandleSizeChange"
              @current-change="dialoghandleCurrentChange"
              background
              :current-page.sync="obj.page"
              :page-sizes="[10, 20, 30, 50, 100, 200]"
              :page-size="obj.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dialogtotal">
              </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
              <div class="yt-btn yt-btn-ys" type="danger" @click="dialogVisible=false">
                {{$t('button.cancel')}}
              </div>
            </span>
          </el-dialog>
      </div>

      <div key="2" v-else>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%;margin-top: 20px" max-height="600">
          <el-table-column type="index" align="center" :label="$t('myDailyManage.index')" width="60"/>
          <el-table-column align="center" :label="$t('myDailyManage.dailyDate')" prop="dailyDate">
            <template slot-scope="scope">
              <div style="text-decoration: underline;color: #6dcaa8;cursor: pointer;"  @click="handlePreserve(scope.row)">{{ scope.row.dailyDate }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('myDailyManage.hrs')" prop="hrs"/>
          <el-table-column align="center" :label="$t('myDailyManage.statusName')" prop="statusName"/>
          <el-table-column align="center" :label="$t('myDailyManage.createName')" prop="createName"/>
          <el-table-column align="center" :label="$t('myDailyManage.createTime')" prop="updateTime"/>
        </el-table>
        <div class="pagination-container">
          <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import { myManageDailyReport, myManageDailyCountReport } from '@/api/dailyAdministrator/myDaily';
  import YtGetTemplateSelect from '@/components/Yt-template/getTemplateSelect.vue';
  import formatter from '@/utils/formatter';
  import { queryItem } from '@/api/management/dailyReportManagement';

  export default {
    name: 'myManageDailyReport',
    components: {
      YtGetTemplateSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        formatter,
        tablePane: '1',
        statusName: this.$store.getters.allMapDic.dailyStatus,
        listAll: this.$store.getters.allDic,
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          order: 'desc', // 降序（desc）/升序（asc）
          orderBy: 'daily_date', // 排序字段
          page: 1,
          limit: 10,
          name: '',
          startTime: '',
          endTime: '',
          description: '',
          bu: ''
        },
        timeCondition: [],
        total: 0,
        dialogtotal: 0,
        obj: {
          page: 1,
          limit: 10
        },
        dialogVisible: false,
        dialogList: [],
        countList: [],
        list: []
      };
    },
    mounted() {
      this.getList()
    },
    methods: {
      dialoghandleSizeChange(val) {
        this.obj.limit = val;
        this.queryStayDailyNum()
      },
      dialoghandleCurrentChange(val) {
        this.obj.page = val;
        this.queryStayDailyNum()
      },
      checkStayDailyNum(row) {
        this.obj.name = row.userName
        this.queryStayDailyNum()
      },
      queryStayDailyNum() {
        // 请求待提交数量弹窗列表
        this.obj.isIgnore = 0

        if (this.timeCondition == null) {
          this.obj.startTime = '';
          this.obj.endTime = '';
        }
        if (this.timeCondition && Array.isArray(this.timeCondition) && this.timeCondition.length === 2) {
          this.obj.startTime = this.timeCondition[0];
          this.obj.endTime = this.timeCondition[1];
        }
        queryItem(this.obj).then(response => {
          this.dialogList = response.data.data.rows
          this.dialogtotal = response.data.data.total;
          this.dialogVisible = true
        });
      },
      reset() {
        this.listQuery = {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          page: 1,
          limit: 10,
          createBy: '',
          name1: '',
          startTime: '',
          endTime: '',
          description: '',
          bu: ''
        };
        this.timeCondition = []
        this.getList();
      },
      handleFilter() {
        this.listQuery.name = this.listQuery.name1
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handlePreserve(row) {
        // this.$router.push({ path: '/dailyManagement/myDailyManageLook', params: { date: row.dailyDate } });
        this.$router.push({ path: '/dailyManagement/myDailyManageLook', query: { id: row.id } })
      },
      selectDailyByName(row) {
        console.log(row)
        this.tablePane = '2'
        this.listQuery.name = row.userName
        this.getList()
      },
      getList() {
        if (this.timeCondition == null) {
          this.listQuery.startTime = '';
          this.listQuery.endTime = '';
        }
        if (this.timeCondition && Array.isArray(this.timeCondition) && this.timeCondition.length === 2) {
          this.listQuery.startTime = this.timeCondition[0];
          this.listQuery.endTime = this.timeCondition[1];
        }

        if (this.tablePane === '2') {
          myManageDailyReport(this.listQuery).then(res => {
            this.list = res.data.data.rows
            this.list.forEach(x => {
              x.statusName = this.statusName[x.status]
            })
            this.total = res.data.data.total
          });
        } else {
          myManageDailyCountReport(this.listQuery).then(res => {
            console.log(res)
            this.countList = res.data.list
          });
        }
      }
    }
  };
</script>
<style scoped lang="scss">

.list-content{
  padding-right: 20px;
  border-bottom: solid 0px #d3d3d3 !important;
  /deep/ .el-tabs__active-bar{
    background-color: #6dcaa8;
  }
  /deep/ .el-tabs__item.is-active{
    color: #6dcaa8;
  }
  /deep/ .el-tabs__item:hover{
    color: #6dcaa8;
  }
}

</style>
